<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>列表组</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        body {
            padding: 30px;
        }

    </style>
</head>
<body>
<div class="container">
    <!--<ul class="list-group">-->
        <!--<li class="list-group-item ">同桌的你</li>-->
        <!--<li class="list-group-item ">花样年华-->
        <!--</li>-->
        <!--<li class="list-group-item">甜蜜蜜-->
        <!--</li>-->
        <!--<li class="list-group-item">向天再借五百年</li>-->
    <!--</ul>-->
    <ul class="list-group">
        <li class="list-group-item active ">同桌的你
            <!--徽章图标-->
            <span class="badge">12</span>
        </li>
        <!--list-group-item-success 带有样式的列表-->
        <li class="list-group-item list-group-item-success">花样年华
            <span class="badge">5</span>
        </li>
        <li class="list-group-item">甜蜜蜜
            <span class="badge">8</span>
        </li>
        <li class="list-group-item">向天再借五百年</li>
    </ul>
</div>

</body>
</html>